<template>
  <div class="disciplineBoard">
    <el-card class="box-card card">

      <!-- top -->
      <template v-scope class="top">
        <el-form ref="form" :model="form" :inline="true" label-width="80px">
          <el-form-item label="目录名称">
            <el-input v-model="form.directoryName" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择">
              <el-option label="启用" value="true" />
              <el-option label="禁用" value="false" />
            </el-select>
          </el-form-item>
          <el-button class="toClear" @click="Clear">清除</el-button>
          <el-button type="toSearch" @click="Search">搜索</el-button>
          <el-button icon="el-icon-edit" type="success" class="addBtn" @click="jia">新增目录</el-button>
        </el-form>

      </template>

      <!-- message -->
      <div class="message">
        <el-alert
          :closable="false"
          show-icon
        >
          <slot name="title"><span> 数据一共{{ page.total }}条 </span></slot>
        </el-alert>
      </div>

      <!-- table  -->
      <div>
        <el-table
          :data="tableData"
          style="width:100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="80"
          />
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="100"
          />
          <el-table-column
            prop="directoryName"
            label="目录名称"
          />
          <el-table-column
            prop="username"
            label="创建者"
            width="120"
          />
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="200"
          />
          <el-table-column
            prop="totals"
            label="面试题数量"
            width="120"
          />
          <el-table-column
            prop="state"
            label="状态"
          />
          <el-table-column label="操作" width="260">
            <template v-slot="scope">
              <el-row>
                <el-button type="text" size="small">启用</el-button>
                <el-button type="text" size="small" @click="xiu(scope.row.id)">修改</el-button>
                <el-button type="text" size="small" @click="delemdeletepmenu(scope.row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 页码 pagination -->
      <div class="pagination">
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            background
            :page-sizes="[5, 10, 15, 20]"
            :current-page.sync="page.page"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-row>
        <changeMenu :showdialog.sync="showdialog" :list="list" @reAfterAdd="reAfterAdd(page)" />
      </div>
    </el-card>
  </div>
</template>

<script>
import changeMenu from './changemenu.vue'
import { getMenusList, delMenusList, subMenusList } from '@/api/subject'

export default {
  components: { changeMenu },
  data() {
    return {
      list: {},
      showdialog: false,
      search: '',
      currentPage: 2,
      page: {
        page: '', // 当前页码
        pagesize: '', // 每页显示的条数
        total: '' // 服务器的总数据
      },
      tableData: [],

      form: {
        directoryName: ''
      }
      // tableData: [{
      //   id: 1,
      //   belong: '123',
      //   menuName: '是',
      //   creater: '超级管理员',
      //   createDate: '2019-8-3',
      //   interviewNum: '0',
      //   state: '已启用'
      // },
      // {
      //   id: 2,
      //   belong: '产品',
      //   menuName: '33',
      //   creater: '超级管理员',
      //   createDate: '2019-8-3 19:53:03',
      //   interviewNum: '0',
      //   state: '已禁用'
      // },
      // {
      //   id: 3,
      //   belong: '',
      //   menuName: '2313156212',
      //   creater: '超级管理员',
      //   createDate: '2022-11-21 19:19:18',
      //   interviewNum: '1',
      //   state: '已启用'
      // }]
    }
  },
  created() {
    this.getMenusList(this.page)
  },
  methods: {
    // 将接口中的数据渲染
    async getMenusList() {
      const { items, counts } = await getMenusList(this.page)
      // console.log(res, '1231232')
      this.page.total = counts
      this.tableData = items
      console.log(this.tableData, '页面渲染')
    },
    reAfterAdd(page) {
      this.getMenusList(page)
      console.log('reAfterAdd')
    },
    // 修改目录 弹窗显示
   async xiu(id) {
     this.list = await subMenusList(id)
     console.log(this.list, '目录详情')
      this.showdialog = true
    },
     // 添加目录
     jia() {
      this.showdialog = true
    },
    // 弹窗显示
    // xiu() {
    //   this.showdialog = true
    // },
    // 删除提示弹窗样式内容
    // open() {
    //   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //     cancelButtonText: '取消',
    //     confirmButtonText: '确定',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$message({
    //       type: 'success',
    //       message: '删除成功!'
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     })
    //   })
    // },

    // 删除目录
    async delemdeletepmenu(id) {
      // alert(id)
            await this.$confirm('您确定删除该目录吗')
            await delMenusList(id)
            this.getMenusList(this.page)
            this.$message.success('删除目录成功')
    },

    // 搜索按钮
    Search() {
      // console.log('开始搜索,关键词是：', this.search)
      // 根据筛选
      // this.tableData = this.fuzzyQuery(this.tableData, this.search)
      // this.page.tableData = this.tableData.length
    },
    // 搜索用户的方法
    // fuzzyQuery(list, keyWord) {
    //   var reg = new RegExp(keyWord)
    //   var arr = []
    //   for (var i = 0; i < list.length; i++) {
    //     if (reg.test(list[i].subjectName)) {
    //       arr.push(list[i])
    //     }
    //   }
    //   return arr
    // },
    // 消除
    Clear() {
      this.search = ''
      this.getMenusList(this.page)
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pagesize = val
    },
    handleCurrentChange(num, val) {
      console.log(`当前页: ${val}`)
      this.page.pagesize	 = num
      this.getcompanys(this.page)
    },
    changePage(num) {
      this.page.pagesize = num
      this.getMenusList(this.page)
    }
  }
}

</script>

<style scoped>
.card{
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 15px;
  background-color: #fff;
}
.search{
  width: 200px;
  height: 8px;
}
.clear{
  margin-left: 15px;
  /* margin-right: 10px; */
}
.top{
  position: relative;
}
.addBtn{
position: absolute;
right: 15px;
}
.message{
  margin-top: 15px;
  margin-bottom: 10px;
}
.pagination{
  margin-top: 5px;
}
</style>
